import { toRaw, reactive } from 'vue'
interface PagingProps {
    // 当前页
    page?: number
    // 每页条数
    pageSize?: number
    // 请求函数
    fetchFunc: (_arg: any) => Promise<any>
    // 请求参数
    params?: Record<string, any>
    // 是否第一次请求   
    firstFetch?: boolean
    // 是否第一次加载
    firstLoad?: boolean
}


// 请求数据实例化
export function usePaging(
    options: PagingProps
) {
    const { page = 1, pageSize = 10, fetchFunc, params = {}, firstFetch = true, firstLoad = true } = options
    // 记录分页信息
    const paramsInit: Record<string, any> = Object.assign({}, toRaw(options))

    // 分页数据
    const pageData = reactive({
        // 当前页
        page,
        // 每页条数
        pageSize,
        // 总条数
        total: 0,
        // 列表
        lists: [] as any[],
        // 是否第一次加载
        loading: firstLoad,
    })

    // 请求数据

    // ... existing code ...
    const requestData = async () => {
        // 是否第一次加载
        if (firstLoad) {
            pageData.loading = true
        }
        // 请求数据
        const res = await fetchFunc({
            page: pageData.page,
            pageSize: pageData.pageSize,
            ...params
        }).then((res) => {
            pageData.lists = res.lists
            pageData.total = res.total
            pageData.page = res.page
            pageData.pageSize = res.pageSize
            pageData.loading = false
        })




    }

    // 重置为第一页
    const resetPage = () => {
        pageData.page = 1
        requestData()
    }

    // 数据重载
    const resetParams = () => {
        Object.keys(paramsInit).forEach((key) => {
            params[key] = paramsInit[key]
        })
        // 重置数据
        requestData()
    }
    return {
        pageData,
        requestData,
        resetParams,
        resetPage
    }
}